<template>
  <div class="container">
    <div class="left-section">
      <p>初始的msg: {{ msg }}</p >
      <p>反转后的值: {{ reversedMsg }}</p >
      <button @click="editMsg" class="btn">更改</button>
    </div>

    <div class="right-section">
      <p>初始message: {{ message }}</p >
      <p>反转之后的值: {{ reversedMessage }}</p >
      <button @click="reverseMessage" class="btn">更改</button>
    </div>
    
  </div>
</template>

<script setup>
import { ref } from "vue";

let msg = ref("Hello World");
let reversedMsg = ref("");

function editMsg() {
  reversedMsg.value = msg.value.split("").reverse().join("");
}

let message = ref("hello");
let reversedMessage = ref("");

function reverseMessage() {
  reversedMessage.value = message.value.split("").reverse().join("");
}
</script>

<style>
.container {
  display: flex;
  align-items: flex-start;
}

.left-section, .right-section {
  padding: 25px;
}
</style>